<template>
	<div class="container">
		<div class="login-wrapper">
			<div class="title-bar">
				<img class="logo" src="@/assets/oj.png" alt="" />
				<div class="title">LOJ</div>
			</div>
			<div class="header">Login</div>
			<div class="form">
				<el-form ref="loginForm" :model="form" label-width="auto" :rules="loginRules">
					<el-form-item prop="username" label="用户名">
						<el-input autocomplete="“off”" v-model="form.username" placeholder="请输入用户名"></el-input>
					</el-form-item>
					<el-form-item prop="password" label="密码">
						<el-input type="password" show-password v-model="form.password" placeholder="请输入密码"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button :loading="loading" class="login-button" type="primary" @click="onSubmit">登录</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div class="tip">还没有账号？<router-link to="/user/register">去注册</router-link></div>
		</div>
	</div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { userLogin } from "@/api/user";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import useUserStore from "@/stores/user";

const router = useRouter();
const loginForm = ref();
const loading = ref(false);
const form = reactive({
	username: "",
	password: ""
});
const loginRules = reactive({
	username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
	password: [
		{ required: true, message: "请输入密码", trigger: "blur" },
		{ min: 6, message: "密码长度不能小于6位", trigger: "blur" }
	]
});
const userStore = useUserStore();

const onSubmit = async () => {
	if (!loginForm.value) return;
	await loginForm.value.validate(async valid => {
		if (valid) {
			loading.value = true;
			userLogin({
				userAccount: form.username,
				userPassword: form.password
			}).then(res => {
				console.log(res);
				if (res.code !== 0) {
					ElMessage.error(res.message);
					loginForm.value.resetFields();
					loading.value = false;
				} else {
					ElMessage.success(`欢迎${res.data.userName}回来！`);
					loading.value = false;
					userStore.updateUser(res.data);
					router.push("/questions");
					loginForm.value.resetFields();
				}
			});
		}
	});
};
</script>

<style scoped lang="scss">
.container {
	width: 100%;
	height: 100vh;
	background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
	.login-wrapper {
		background-color: #fff;
		width: 358px;
		height: 588px;
		border-radius: 15px;
		padding: 30px 50px;
		position: relative;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		.title-bar {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 48px;
			margin-top: 20px;
			.logo {
				height: 48px;
				margin: 0 20px;
			}
			.title {
				line-height: 48px;
			}
		}
		.header {
			margin-top: 30px;
			font-size: 30px;
			font-weight: bold;
			text-align: center;
		}
	}
	.form {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 50px;
		.login-button {
			width: 100%;
			background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
			border: none;
		}
	}
	.tip {
		text-align: center;
		a {
			text-decoration: none;
		}
		.router-link-active {
			text-decoration: none;
		}
	}
	.el-input {
		width: 250px;
	}
	:deep(.el-input__inner) {
		transition: background-color 5000s ease-in-out 0s;
	}
}
</style>
